<template>
  <div class="form_bar">
    <el-form :model="formData" class="searchForm" :inline="true">
      <!-- 客户姓名 -->
      <el-form-item label="客户姓名" label-width="80px">
        <el-input v-model="formData.name" placeholder="请输入客户姓名进行搜索" clearable> </el-input>
      </el-form-item>
      <!-- 客户姓名 -->
      <el-form-item label="客户手机" label-width="80px">
        <el-input v-model="formData.mobile" placeholder="请输入手机号进行搜索" class="w-20 m-1" clearable> </el-input>
      </el-form-item>
      <!-- 群主/创建人 -->
      <el-form-item label="归属员工" label-width="80px">
        <el-select popper-class="zw-hide_select_option" :popper-append-to-body="false" v-model="formData.work_user_ids" multiple placeholder="请选择员工" @click="openDepart" @change="changeDepart">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 50px">
        <el-button size="small" type="primary" @click="submitForm">查询</el-button>
        <el-button size="small" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, defineEmits } from 'vue'
  import type { ElForm } from 'element-plus'
  import ZWDepart from '@/components/ZWDepart.vue'
  import getContactList from '@/api/employe/riskmonitoring/messagearchiving'
  import { getSetionId } from '@/utils/utils'

  const formData = reactive({
    name: '',
    mobile: '',
    work_user_ids: [],
    page: 1, //分页页码
    page_size: '' //每页显示数
  })
  //打开新建选择人
  const DepartRef = ref(null)
  const creators: any = ref([])

  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    formData.work_user_ids = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
  }
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    formData.work_user_ids = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }

  const emit = defineEmits(['submitForm'])
  const submitForm = () => {
    emit('updateContactList', {
      ...formData
    })
    console.log('666666666666666666')
  }
  //重置
  const resetForm = () => {
    formData.name = ''
    formData.mobile = ''
    formData.work_user_ids = []
    emit('updateContactList', {
      ...formData
    })
  }
</script>

<style lang="scss" scoped>
  :deep .el-form-item__content {
    display: flex;
  }
  .form_bar {
    height: 56px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    border: 1px solid #eae7e7;
    .searchForm {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      :deep .el-form-item {
        margin: 5px;
      }
    }
  }
  :deep .el-select__popper.el-popper[role='tooltip'] {
    display: none;
  }
</style>
